<template lang="html">
  <div class="box">
    <header-title :HeaderTitle='title'></header-title>
    <div class="recharge_header">
      <p class="name">余额:</p>
      <span class="price">¥0.00</span>
      <router-link to="/gerenrechargedetail">充值明细</router-link>
    </div>
    <div class="chargeSum">
      <h2 class="chargeSum_title">*充值金额:</h2>
      <ul class="chargeSum_main">
        <li v-for='item in recharge'><i></i>{{item.num}}元</li>
      </ul>
      <div class="chargeSum_shoudong">
        <label>手动输入</label>
        <input type="number" class="inp" name="chongzhi" placeholder="请输入金额">
      </div>
    </div>
    <div class="wechatPay">微信支付</div>
    <div class="allPay">支付宝扫码支付</div>
  </div>
</template>
<script>
import title from "../header/header.vue";
export default {
  name: 'geren',
  data () {
    return {
      title:{
        url:'/gerenwallet',
        title:"充值"
      },
      recharge:[{num:198},{num:498},{num:998},{num:1998}]
    }
  },
  components:{
    'header-title':title
  }
}
</script>
<style scoped lang="less">
@import '../../../assets/less/index.less';
.box {
  .recharge_header{
    width: 100vw;
    height: 17vw;
    line-height: 17vw;
    border-bottom: solid 1px @color8; 
    text-align: left;
    font-size: @h1_font_size;
    .name{
      display: inline-block;
      color: @color7;
      margin-left: 4vw;
    }
    .price{
      color: @color;
      font-size: @h6_font_size;
      font-weight: 700;
    }
    a{
      display: inline-block;
      color: @color7;
      width: 20vw;
      text-align: center;
    }
  }
  .chargeSum{
    width: 100vw;
    .chargeSum_title{
      width: @width;
      margin: 0 auto;
      height: 10vw;
      line-height: 10vw;
      font-size: @h1_font_size;
      text-align: left;
    }
    .chargeSum_main{
      width: @width;
      margin: 0 auto;
      overflow: hidden;
      zoom:1;
      li{
        display: inline-block;
        width: 44vw;
        height: 10vw;
        line-height: 10vw;
        border: solid 1px @color;
        border-radius: 1vw;
        margin-bottom: 2vw;
        float: left;
      }
      li:nth-of-type(2n){
        float: right;
      }
    }
    .chargeSum_shoudong{
      width: 100%;
      height: 10vw;
      border-top: solid 1px @color8;
      border-bottom: solid 1px @color8;
      label{
        width: 20vw;
        display: inline-block;
      }
      input{
        width: 60vw;
        padding-top: 0;
        padding-bottom: 0;
        padding-top: 2vw;
        padding-bottom: 2vw;
      }
    }
  }
  .allPay,.wechatPay{
    width: @width;
    height: 10vw;
    margin: 2vw auto;
    line-height: 10vw;
    font-size: @h1_font_size;
    color: @color1;
    border-radius: 1vw;
  }
  .wechatPay{
    background-color: @color9;
  }
  .allPay{
    background-color: @color10;
  }
}
</style>